<template>
  <view class="container">
    <u-button type="primary" text="确定" class="button" @click="butnClick" v-if="isShowBtn"></u-button>
    <map style="width: 100%; height: 100%" :latitude="latitude" :longitude="longitude" :markers="markers"
      :bindcontroltap="bindcontroltap" @click="bindtap"></map>
    <view class="select-wrap" v-if="!isShowBtn">
      <u--input placeholder="请输入关键词搜索" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
        shape="circle" v-model="likeName" @change="input_change"></u--input>

      <view class="policenameClass">
        <view class="position-wrap" v-for="item in position_list" @click="rdioHandle(item)">
          <view class="position-name">
            <u-icon name="map" color="#000" size="14"></u-icon>
            <text> {{ item.fNames }}</text>
            <view class="distanc">
              <block v-if="item.distance">
                <!-- {{ (item.distance / 1000).toFixed(1) }} -->
                {{ item.distance }} {{ item.unit }}
              </block>
              <block v-else>未知距离</block>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getAction,
    postAction
  } from "@/utils/request.js";
  export default {
    data() {
      return {
        latitude: "",
        longitude: "",
        markers: [],
        likeName: "",
        position_list: [],
        isShowBtn: false,

        pageConfig: {
          pageNo: 1,
          pageSize: 50,
          total: 0,
        },
      };
    },
    onLoad(options) {
      this.isShowBtn = options.isShowBtn;
      uni.getLocation({
        type: "wgs84",
        success: (res) => {
          this.latitude = res.latitude;
          this.longitude = res.longitude;
          this.markers.push({
            id: 1,
            latitude: res.latitude,
            longitude: res.longitude,
            iconPath: "/static/icons/location.png",
            width: 25,
            height: 30,
          });

          this.get_target_position();
        },
      });
    },

    //   onReachBottom() {
    //     let current = (this.pageConfig.pageNo += 1);
    //     let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
    //     if (current <= pages) {
    //       this.get_target_position();
    //     } else {
    //       this.pageBottom = true;
    //     }
    //   },

    onShow() {},
    methods: {
      bindtap(e) {
        console.log(e, "bindtap");

        // 设置目标经纬度
        let targetLatitude = e.detail.latitude;
        let targetLongitude = e.detail.longitude;

        // 每次移动的步长
        let step = 0.001; // 例如每次移动0.001度

        // 设置定时器
        let interval = setInterval(() => {
          // 如果当前经纬度小于目标经纬度，则逐步增加
          if (this.latitude < targetLatitude) {
            this.latitude += step;
          }
          // 如果当前经纬度大于目标经纬度，则逐步减少
          else if (this.latitude > targetLatitude) {
            this.latitude -= step;
          }

          // 如果当前经纬度小于目标经纬度，则逐步增加
          if (this.longitude < targetLongitude) {
            this.longitude += step;
          }
          // 如果当前经纬度大于目标经纬度，则逐步减少
          else if (this.longitude > targetLongitude) {
            this.longitude -= step;
          }

          // 更新地图显示的经纬度
          // 这里可能需要调用地图相关的 API 来更新地图显示的位置
          // 例如 uni.createMapContext("map").moveToLocation({latitude: this.latitude, longitude: this.longitude});

          // 如果当前经纬度接近目标经纬度，则停止定时器
          if (
            Math.abs(this.latitude - targetLatitude) < step &&
            Math.abs(this.longitude - targetLongitude) < step
          ) {
            clearInterval(interval);
          }
        }, 100); // 每100毫秒移动一次

        this.markers = [{
          id: 1,
          latitude: e.detail.latitude,
          longitude: e.detail.longitude,
          iconPath: "/static/icons/location.png",
          width: 25,
          height: 30,
        }, ];
      },
      butnClick() {
        let lat = this.latitude.toFixed(6);
        let lng = this.longitude.toFixed(6);
        uni.setStorageSync("lng_lat", {
          lat,
          lng
        });
        uni.navigateBack();
      },

      input_change() {
        this.get_target_position();
      },

      async get_target_position() {
        let data = {
          houseLng: this.longitude ? this.longitude : '0',
          houseLat: this.latitude ? this.latitude : '',
          likeName: this.likeName,
          pageNo: this.pageConfig.pageNo,
          pageSize: this.pageConfig.pageSize,
        };

        let res = await getAction("/indeed/house/mapPoints", data);

        const list = res.result.records.map((v) => ({
          id: v.fDzbm,
          distance: v.distance ?
            Number(v.distance) < 1 ?
            Number(v.distance).toFixed(2) * 1000 :
            Number(v.distance).toFixed(2) : "",
          unit: Number(v.distance) < 1 ? "m" : "km",
          fNames: v.fNames,
          flag: false,
        }));
        //   this.position_list = this.position_list.concat(list);
        this.position_list = list;
        this.pageConfig.total = res.result.total;
      },

      rdioHandle(item) {
        uni.$emit("mapPoints", item);
        uni.navigateBack();
      },

      bindcontroltap(e) {
        console.log(e, "bindcontroltap");
        //   https://apis.map.qq.com/ws/place/v1/search?key=Q33BZ-GK7HQ-E7V57-4GFRG-H4QX6-JTFUT&keyword=%E4%B8%9C%E6%96%B0%E4%B8%96%E7%BA%AA%E5%B9%BF%E5%9C%BA&boundary=nearby(34.23236183920172,108.93433583640808,1000,1)
      },
    },
  };
</script>

<style scoped lang="scss">
  .container {
    height: 100vh;
    width: 100vw;
    position: relative;
  }

  .button {
    position: absolute;
    top: 0;
    right: 0;
    width: fit-content;
    z-index: 9;
  }

  .select-wrap {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 700rpx;
    z-index: 9;
    padding: 30rpx;
    background-color: #fff;

    .policenameClass {
      margin-top: 30rpx;

      .position-wrap {
        height: 100rpx;
        margin-right: 16rpx;
        padding: 18rpx 0;
        border-bottom: 1rpx solid #e8e8e8;

        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .position-name {
          display: flex;
          align-items: center;
          // justify-content: space-between;
          position: relative;

          text {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 30rpx;
            color: #181818;
          }

          .distanc {
            flex: 1;
            display: flex;
            justify-content: flex-end;
          }
        }

        .position-addr {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-family: PingFang SC, PingFang SC;
          color: #6a6a6a;

          .add-detail {
            font-weight: 500;
            font-size: 24rpx;
            width: 548rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .distanc {
            font-weight: 400;
            font-size: 26rpx;
          }
        }
      }
    }
  }
</style>